<template>
  <div class="D1main">
      <input type="text"  :value="phone"  @blur="phones($event)">
      <p class="phonewarm">{{txt}}</p>
      <input type="text" value="验证码" @click="tophone($event)" @blur="codes($event)" @keyup="totrim($event)">
      <s-identify class="phonecode" :fresh="flags" @makedCode="getMakedCode"></s-identify>
      <span @click="refreshCode" class="phonechange">看不清换一张</span> 
      <p class="phonewarm3">{{txt3}}</p>
      <input type="password" name="" placeholder="请输入密码（6-20位号码字符）" @blur="toagainpas($event)" @click="pass($event)"  @keyup="totrim($event)">
      <p class="phonewarm2">{{txt2}}</p>
      <input id="phonesub" type="submit" value="提交验证" @click="tosuccess()">
  </div>
</template>

<script>
import SIdentify from './identify';
import Bus from './Bus';
export default {
    name:"Datachange1",
    components:{
        SIdentify,
    },
    data(){
        return{
            txt:'',
            txt2:'',
            txt3:'',
            flags:true,  //该值变化，就会触发刷新
            code:'',  //刷新后的验证码
            phone:this.$store.state.phone,
            pas:this.$store.state.pas,
        }
    },
    methods:{
        // 切换验证码
        refreshCode() {
            this.flags = !this.flags;
        },
        getMakedCode(code){
            this.code = code
        },
        // 验证码
        codes(e){
            this.code1 = e.target.value;
            console.log(this.code);
            if(this.code==e.target.value){
                this.txt3 = '';
            }else{
                this.txt3 = '验证码错误';
            }
        },
        // 电话
        phones(e){
            let reg = /^1[34578]\d{9}$/
            var value = e.target.value;
            if (reg.test(value)) {
                this.phone = value;
                this.txt = '';
            }else if(!reg.test(value)) {
                this.txt = '格式错误';
            }
        },
        tophone(e) {
            e.target.value = '';
        },
        // 去空格
        totrim(e) {
            e.target.value=e.target.value.replace(/\s+/g, '');
        },
        // 验证密码
        toagainpas(e) {
            var value = e.target.value; 
            if (value !== this.pas) {
                this.txt2 = '密码错误';
            } else {
                this.txt2 = '';
            }
        },
        pass(e){
            e.target.placeholder = '';
        },
        tosuccess(){
            this.$emit('tiao1');
        }
    },
    // 验证码初始化
    mounted() {
        this.flags = !this.flags;
        console.log(this.$store.state.pas);
        Bus.$on('tiao',data=>{
            console.log(data);
        })
    },
}
</script>

<style scoped>
.D1main {
    display: flex;
    flex-direction: column;
}
input  {
    height: 42px;
    background: #f9f9f9;
    border: 1px solid #d3d3d3;
    padding-left: 13px;
    font-size: 16px;
    color: #999999;
    width: 289px;
    margin-top: 36px;
}
::placeholder {
    color: #999999;
}
input:nth-child(3){
    width: 111px;
    margin-right: 20px;
}
.phonecode {
    width: 79px;
    height: 34px;
    position: absolute;
    top: 258px;
    left: 183px;
}
.phonechange {
    position: absolute;
    top: 265px;
    left: 310px;
    font-size: 14px;
    color: #ea5b0c;
}
.phonewarm3,.phonewarm,.phonewarm2 {
    text-align: left;
    position: absolute;
    color: #f00;
    font-size: 14px;
}
.phonewarm {
    top: 220px;
}
.phonewarm3 {
    top: 300px;
}
.phonewarm2 {
    top: 380px;
}
#phonesub {
    height: 50px;
    width: 150px;
    font-size: 20px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    border: none;
    outline: none;
    padding-left: 0;
}
</style>